
/**
 * DIY组件适配器
 * 用于将as-editor-master的组件数据结构适配到我们的新结构
 */

import { COMPONENT_TYPES } from './constants.js'

/**
 * 适配as-editor-master的组件数据
 * @param {Object} component as-editor-master的组件数据
 * @returns {Object} 适配后的组件数据
 */
export function adaptComponent(component) {
  if (!component) return null

  // 根据组件类型进行适配
  switch (component.component) {
    case 'commoditysearch':
      return adaptSearchBlock(component)
    case 'captiontext':
      return adaptTitleText(component)
    case 'pictureads':
      return adaptImageBanner(component)
    case 'graphicnavigation':
      return adaptMenuGrid(component)
    case 'notice':
      return adaptNotice(component)
    case 'richtext':
      return adaptRichText(component)
    case 'videoss':
      return adaptVideo(component)
    case 'listswitching':
      return adaptGoodsList(component)
    case 'crowdoperation':
      return adaptGrouponBlock(component)
    case 'storeinformation':
      return adaptStoreInfo(component)
    case 'follow':
      return adaptFollow(component)
    case 'onlineservice':
      return adaptOnlineService(component)
    case 'auxiliarysegmentation':
      return adaptAuxiliarySegmentation(component)
    case 'tabBar':
      return adaptTabBar(component)
    case 'magiccube':
      return adaptMagicCube(component)
    case 'suspension':
      return adaptSuspension(component)
    default:
      return adaptGeneric(component)
  }
}

/**
 * 适配商品搜索组件
 */
function adaptSearchBlock(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.SEARCH_BLOCK,
    name: '商品搜索',
    data: {
      heights: component.setStyle?.heights || 36,
      backgroundColor: component.setStyle?.backgroundColor || '#f5f5f5',
      borderColor: component.setStyle?.borderColor || '#f5f5f5',
      borderRadius: component.setStyle?.borderRadius || 1,
      textPosition: component.setStyle?.textPosition || 0,
      textColor: component.setStyle?.textColor || '#999999',
      placeholder: component.setStyle?.placeholder || '搜索商品',
      sweep: component.setStyle?.sweep || false,
      hotords: component.setStyle?.hotords || []
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配标题文本组件
 */
function adaptTitleText(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.TITLE_TEXT,
    name: '标题文本',
    data: {
      text: component.setStyle?.text || '标题文本',
      fontSize: component.setStyle?.fontSize || 16,
      color: component.setStyle?.color || '#333333',
      fontWeight: component.setStyle?.fontWeight || 'normal',
      textAlign: component.setStyle?.textAlign || 'left'
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配图片广告组件
 */
function adaptImageBanner(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.IMAGE_BANNER,
    name: '图片广告',
    data: {
      images: component.setStyle?.images || [],
      height: component.setStyle?.height || 150,
      borderRadius: component.setStyle?.borderRadius || 0,
      autoplay: component.setStyle?.autoplay !== false,
      interval: component.setStyle?.interval || 3000
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配菜单网格组件
 */
function adaptMenuGrid(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.MENU_GRID,
    name: '菜单网格',
    data: {
      menuList: component.setStyle?.menuList || [],
      columns: component.setStyle?.columns || 4,
      showText: component.setStyle?.showText !== false,
      iconSize: component.setStyle?.iconSize || 24,
      textSize: component.setStyle?.textSize || 12
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配公告组件
 */
function adaptNotice(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.NOTICE,
    name: '公告',
    data: {
      text: component.setStyle?.text || '',
      backgroundColor: component.setStyle?.backgroundColor || '#fff7e6',
      textColor: component.setStyle?.textColor || '#e6a23c',
      iconColor: component.setStyle?.iconColor || '#e6a23c',
      showIcon: component.setStyle?.showIcon !== false,
      closable: component.setStyle?.closable !== false
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配富文本组件
 */
function adaptRichText(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.RICH_TEXT,
    name: '富文本',
    data: {
      content: component.setStyle?.content || '',
      backgroundColor: component.setStyle?.backgroundColor || '#ffffff',
      padding: component.setStyle?.padding || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配视频组件
 */
function adaptVideo(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.VIDEO,
    name: '视频',
    data: {
      url: component.setStyle?.url || '',
      poster: component.setStyle?.poster || '',
      autoplay: component.setStyle?.autoplay !== false,
      controls: component.setStyle?.controls !== false,
      loop: component.setStyle?.loop === true,
      muted: component.setStyle?.muted === true
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配商品列表组件
 */
function adaptGoodsList(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.GOODS_LIST,
    name: '商品列表',
    data: {
      goodsList: component.setStyle?.goodsList || [],
      layout: component.setStyle?.layout || 'vertical',
      showPrice: component.setStyle?.showPrice !== false,
      showTitle: component.setStyle?.showTitle !== false,
      showSales: component.setStyle?.showSales === true,
      borderRadius: component.setStyle?.borderRadius || 4,
      margin: component.setStyle?.margin || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配拼团活动组件
 */
function adaptGrouponBlock(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.GROUPON_BLOCK,
    name: '拼团活动',
    data: {
      grouponGoods: component.setStyle?.grouponGoods || [],
      title: component.setStyle?.title || '拼团活动',
      showProgress: component.setStyle?.showProgress !== false,
      borderRadius: component.setStyle?.borderRadius || 8,
      margin: component.setStyle?.margin || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配店铺信息组件
 */
function adaptStoreInfo(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.STORE_INFO,
    name: '店铺信息',
    data: {
      logo: component.setStyle?.logo || '',
      name: component.setStyle?.name || '店铺名称',
      description: component.setStyle?.description || '店铺描述',
      backgroundColor: component.setStyle?.backgroundColor || '#ffffff',
      textColor: component.setStyle?.textColor || '#333333',
      borderRadius: component.setStyle?.borderRadius || 8,
      margin: component.setStyle?.margin || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配关注组件
 */
function adaptFollow(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.FOLLOW,
    name: '关注',
    data: {
      avatar: component.setStyle?.avatar || '',
      nickname: component.setStyle?.nickname || '用户昵称',
      description: component.setStyle?.description || '关注我们，获取最新资讯',
      backgroundColor: component.setStyle?.backgroundColor || '#ffffff',
      textColor: component.setStyle?.textColor || '#333333',
      buttonColor: component.setStyle?.buttonColor || '#409eff',
      buttonText: component.setStyle?.buttonText || '关注',
      borderRadius: component.setStyle?.borderRadius || 8,
      margin: component.setStyle?.margin || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配在线客服组件
 */
function adaptOnlineService(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.ONLINE_SERVICE,
    name: '在线客服',
    data: {
      avatar: component.setStyle?.avatar || '',
      nickname: component.setStyle?.nickname || '客服',
      description: component.setStyle?.description || '有什么问题，随时咨询',
      backgroundColor: component.setStyle?.backgroundColor || '#ffffff',
      textColor: component.setStyle?.textColor || '#333333',
      buttonColor: component.setStyle?.buttonColor || '#409eff',
      buttonText: component.setStyle?.buttonText || '咨询',
      borderRadius: component.setStyle?.borderRadius || 8,
      margin: component.setStyle?.margin || 10
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配辅助分割组件
 */
function adaptAuxiliarySegmentation(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.AUXILIARY_SEGMENTATION,
    name: '辅助分割',
    data: {
      height: component.setStyle?.height || 10,
      backgroundColor: component.setStyle?.backgroundColor || '#f5f5f5',
      lineStyle: component.setStyle?.lineStyle || 'solid',
      lineColor: component.setStyle?.lineColor || '#e4e7ed',
      lineHeight: component.setStyle?.lineHeight || 1
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配底部导航组件
 */
function adaptTabBar(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.TAB_BAR,
    name: '底部导航',
    data: {
      tabList: component.setStyle?.tabList || [],
      activeColor: component.setStyle?.activeColor || '#409eff',
      inactiveColor: component.setStyle?.inactiveColor || '#909399',
      backgroundColor: component.setStyle?.backgroundColor || '#ffffff',
      borderStyle: component.setStyle?.borderStyle || 'solid',
      borderColor: component.setStyle?.borderColor || '#e4e7ed',
      iconSize: component.setStyle?.iconSize || 20,
      textSize: component.setStyle?.textSize || 12
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配魔方组件
 */
function adaptMagicCube(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.MAGIC_CUBE,
    name: '魔方',
    data: {
      cubeList: component.setStyle?.cubeList || [],
      layout: component.setStyle?.layout || 'grid',
      columns: component.setStyle?.columns || 3,
      rows: component.setStyle?.rows || 3,
      gap: component.setStyle?.gap || 5,
      borderRadius: component.setStyle?.borderRadius || 0
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配悬浮组件
 */
function adaptSuspension(component) {
  return {
    id: component.id || generateId(),
    type: COMPONENT_TYPES.SUSPENSION,
    name: '悬浮',
    data: {
      image: component.setStyle?.image || '',
      link: component.setStyle?.link || '',
      position: component.setStyle?.position || 'right-bottom',
      size: component.setStyle?.size || 50,
      distance: component.setStyle?.distance || 20
    },
    styles: {
      marginTop: component.setStyle?.pageMargin || 0,
      marginBottom: component.setStyle?.pageMargin || 0,
      marginLeft: component.setStyle?.pageMargin || 0,
      marginRight: component.setStyle?.pageMargin || 0
    }
  }
}

/**
 * 适配通用组件
 */
function adaptGeneric(component) {
  return {
    id: component.id || generateId(),
    type: component.component,
    name: component.text || component.component,
    data: component.setStyle || {},
    styles: {
      marginTop: component.pageMargin || 0,
      marginBottom: component.pageMargin || 0,
      marginLeft: component.pageMargin || 0,
      marginRight: component.pageMargin || 0
    }
  }
}

/**
 * 生成唯一ID
 */
function generateId() {
  return 'component_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
}

/**
 * 反向适配组件数据
 * @param {Object} component 我们的组件数据
 * @returns {Object} as-editor-master格式的组件数据
 */
export function reverseAdaptComponent(component) {
  if (!component) return null

  return {
    id: component.id,
    component: component.type,
    text: component.name,
    type: '1-1', // 默认类型
    active: true,
    style: component.type,
    setStyle: {
      ...component.data,
      pageMargin: component.styles.marginTop
    }
  }
}

/**
 * 批量适配组件数据
 * @param {Array} components as-editor-master格式的组件列表
 * @returns {Array} 适配后的组件列表
 */
export function adaptComponents(components) {
  if (!Array.isArray(components)) return []

  return components.map(component => adaptComponent(component)).filter(Boolean)
}

/**
 * 批量反向适配组件数据
 * @param {Array} components 我们的组件列表
 * @returns {Array} as-editor-master格式的组件列表
 */
export function reverseAdaptComponents(components) {
  if (!Array.isArray(components)) return []

  return components.map(component => reverseAdaptComponent(component)).filter(Boolean)
}
